<script lang="ts" setup>
import { computed, ref } from 'vue';

import { preferences, usePreferences } from '@vben/preferences';

import {
  Col,
  Collapse,
  CollapsePanel,
  Radio,
  RadioGroup,
  Row,
} from 'ant-design-vue';

import { BASE_ICON_URL } from '#/config'; // 引入全局配置

import RoomSelect from './RoomSelect.vue';

// 定义 form 类型
interface Form {
  [key: string]: Array<number>;
}
interface RoomList {
  id: number;
  nameZh: string;
}
// 定义 props 来接收父组件传递的数据
const props = defineProps<{
  activeKey: string[];
  data: {
    id: string;
    list: { id: string; key: string; name: string }[];
    name: string;
  };
  form: Form;
  roomList: RoomList[];
}>();

// 定义 emits 触发更新事件
const emit = defineEmits(['update:active-key', 'update:form']);

const data = ref(props.data);

// 使用 usePreferences 函数获取主题相关信息
const { isDark } = usePreferences();

// 计算当前主题
const currentTheme = computed(() => {
  if (preferences.theme.mode === 'auto') {
    return isDark.value ? 'dark' : 'light';
  }
  return preferences.theme.mode;
});
// 判断面板是否展开
const isPanelActive = computed(() => props.activeKey.includes(data.value.id));

// 折叠事件
const changeCollapse = (e: any) => {
  emit('update:active-key', e);
};

// 获取选中的单选
const getValue = (key: string) => {
  if (props.form[key]?.includes(0)) {
    return '0';
  } else if (props.form[key]?.includes(-1)) {
    return '-1';
  } else return '1';
};
// 触发单选事件
const radioChange = (e: any, key: string) => {
  const data = props.form;
  data[key] = e.target.value === '1' ? [] : [Number(e.target.value)];
  emit('update:form', data);
};
// 更新
const upDataForm = (ids: string[], key: string) => {
  const data = props.form;
  data[key] = ids.map(Number);
  emit('update:form', data);
};
</script>

<template>
  <div class="card-box mb-3 w-full rounded-md p-2">
    <Collapse
      :active-key="props.activeKey"
      :class="[currentTheme]"
      :ghost="true"
      class="list"
      expand-icon-position="end"
      @change="changeCollapse"
    >
      <template #expandIcon>
        <div :class="[currentTheme]" class="text-lg font-bold">
          <img
            :src="`${BASE_ICON_URL}${isPanelActive ? 'icons-20.png' : 'icons-19.png'}`"
            class="mt-2 w-5"
          />
        </div>
      </template>
      <CollapsePanel :key="data.id">
        <template #header>
          <div :class="[currentTheme]" class="text-lg font-bold">
            {{ data.name }}
          </div>
        </template>
        <Row v-for="item in data.list" :key="item.id" :wrap="true" class="py-2">
          <Col
            :class="[currentTheme]"
            :lg="6"
            :md="6"
            :sm="8"
            :xl="6"
            :xs="24"
            class="font-bold"
          >
            {{ item.name }}
          </Col>
          <Col flex="auto">
            <RadioGroup
              :name="item.key"
              :value="getValue(item.key)"
              class="flex flex-wrap"
              @change="radioChange($event, item.key)"
            >
              <div class="relative pb-4">
                <Radio :class="[currentTheme]" value="0"> 所有房型 </Radio>
              </div>
              <div
                :class="[
                  getValue(item.key) === '1' ? 'activeRadio' : '',
                  currentTheme,
                ]"
                :value="1"
                class="relative pb-4"
              >
                <Radio :class="[currentTheme]" value="1">部分房型</Radio>
              </div>
              <div class="relative pb-4">
                <Radio :class="[currentTheme]" value="-1"> 无 </Radio>
              </div>
            </RadioGroup>

            <!-- 下方部分房型选择 -->
            <div
              v-if="['1'].includes(getValue(item.key))"
              :class="[currentTheme]"
              class="bottom-div p-3 px-4"
            >
              <div class="pb-1 opacity-50">请选择房型</div>
              <RoomSelect
                :room-list="roomList"
                :select-ids="props.form[item.key]"
                @change="upDataForm($event, item.key)"
              />
            </div>
          </Col>
        </Row>
      </CollapsePanel>
    </Collapse>
  </div>
</template>

<style lang="scss" scoped>
.activeRadio::before {
  position: absolute;
  bottom: 0;
  left: -4px;
  width: 0;
  height: 0;
  content: '';
  border-color: transparent transparent #f8f8fa;
  border-style: solid;
  border-width: 0 12px 12px;
}

.dark.activeRadio::before {
  border-color: transparent transparent rgba($color: #333, $alpha: 60%);
}

.bottom-div.light {
  background: #f8f8f8;
}

.bottom-div.dark {
  background: rgba($color: #333, $alpha: 60%);
}

.light {
  color: hsl(var(--card-foreground));
}

:deep(.list .ant-collapse-header:hover) {
  background-color: hsl(var(--primary) / 10%);
}

:deep(.dark .ant-collapse-header:hover) {
  background-color: rgba($color: #e1e1e1, $alpha: 10%);
}

:deep(.ant-collapse-item) {
  border-radius: 0 !important;
}

:deep(.ant-collapse-header) {
  border-radius: 4px !important;
}

.dark img {
  filter: invert(1);
}
</style>
